<script lang="ts" setup>
  import { ref, watch, onMounted, onUnmounted } from 'vue';
  import MEcharts from '/@/components/MEcharts/MEcharts.vue';
  import * as echarts from 'echarts/core';
  import { debounce } from 'lodash'; // 或手动实现简单防抖
  const props = defineProps({
    graphDataUpper: Array<any>,
    graphDataAnneal: Array<any>,
    graphDataLower: Array<any>,
    xdata: Array<any>,
  });

  const chartRef = ref();
  const option = ref<any>({
    grid: {
      top: '8%',
      left: '8%',
      right: '8%',
      bottom: '16%',
    },
    animation: false,
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }, //阴影
    },
    xAxis: {
      data: [],
      type: 'category',
      axisLabel: {
        color: '#fff',
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
      },
      z: 10,
    },
    yAxis: {
      color: '#fff',
      name: 'mm',
      nameTextStyle: {
        color: '#fff',
        fontSize: 12,
      },
      boundaryGap: ['0', '10%'],
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        show: false,
      },
      scale: true,
    },
    visualMap: {
      show: false,
      pieces: [
        {
          gte: 0,
          lte: 1000,
          // color: '#FD0100',
          color: '#00FF00',
        },
      ],
      outOfRange: {
        color: '#00FF00',
      },
    },
    series: [
      {
        type: 'line',
        name: '上限',
        data: [],
        lineStyle: {
          width: 1,
          // color: '#00baff',
          color: 'white',
        },
        itemStyle: {},
        force: {
          layoutAnimation: false,
        },
        symbolSize: 1,
        smooth: false, //曲线or折线
      },
      {
        type: 'line',
        name: '实时退火曲线',
        data: [],
        lineStyle: {
          width: 1,
          color: '#f4c74f',
          // color: 'white',
        },
        itemStyle: {
          color: function (params: any) {
            const upper = (props.graphDataUpper ? props.graphDataUpper[params.dataIndex] : 0) || 0;
            const lower = (props.graphDataLower ? props.graphDataLower[params.dataIndex] : 0) || 0;
            return params.value > upper || params.value < lower ? '#FD0100' : '#FD0100';
          },
        },
        force: {
          layoutAnimation: false,
        },
        symbolSize: 1,
        smooth: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 186, 255, 0.6)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.1)' },
          ]),
        },
      },
      {
        type: 'line',
        name: '下限',
        data: [],
        lineStyle: {
          width: 1,
          // color: '#2af598',
          color: 'white',
        },
        itemStyle: {},
        force: {
          layoutAnimation: false,
        },
        smooth: false,
        symbolSize: 1,
      },
    ],
  });

  const updateChart = debounce(() => {
    // 数据长度校验
    const len = props.graphDataAnneal?.length ?? 0;
    if (len === 0 || props.graphDataUpper?.length !== len || props.graphDataLower?.length !== len) {
      return;
    }

    option.value.xAxis.data = props.xdata;
    option.value.series[0].data = props.graphDataUpper;
    option.value.series[1].data = props.graphDataAnneal;
    option.value.series[2].data = props.graphDataLower;

    // 计算 Y 轴范围（合并所有数据）
    const allData = [...props.graphDataUpper, ...(props.graphDataAnneal ?? []), ...props.graphDataLower];
    option.value.yAxis.min = Math.min(...allData) - 1;
    option.value.yAxis.max = Math.max(...allData) + 1;
  }, 100); // 防抖 100ms

  watch(
    () => [props.graphDataUpper, props.graphDataAnneal, props.graphDataLower, props.xdata],
    () => updateChart(),
    { deep: true }
  );

  onMounted(() => {
    // 确保在 DOM 加载完成后更新图表
    setTimeout(() => {
      updateChart();
    }, 1000);

    // 添加窗口大小变化监听
    window.addEventListener('resize', updateChart);
  });

  onUnmounted(() => {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', updateChart);
    updateChart.cancel();
  });
</script>

<template>
  <div ref="chartRef" class="chart-container">
    <m-echarts :option="option"></m-echarts>
  </div>
</template>

<style scoped>
  .chart-container {
    /* width: 800px;
    height: 300px; */
    width: 100%;
    height: 100%;
  }
</style>
